<template>
  <div class="about" v-on:scroll.passive="handleRobotScroll">
    <ImageView></ImageView>
    <div class="content" ref="contentDom" >
      <h1>This is an about page</h1>
      <template v-for="item in list">
        <ul :key="item.img">
          <li>
          <img v-lazy="item.img" :src="item.img" alt="">
          </li>
          <li>{{item.name}}</li>
        </ul>
      </template>
    </div>

  </div>
</template>
<script>
import axios from 'axios';
// import ImageView from '@/components/ImageView'
export default {
  components: {
    ImageView: () => import('@/components/ImageView')
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {

    this.fetchData()
    console.log(document.querySelector('.content'))
    // this.$refs.contentDom.addEventLister
    document.querySelector('.content').addEventListener('scroll', () => {
      console.log('scroll,....:', scroll)
    })
  },
  methods: {
    async fetchData() {
      const data = await axios.get('/data.json')
      this.list = data.data
      console.log('data:....:', this.list)
    },
    handleRobotScroll() {
      console.log('handleRobotScroll')

    }
  },
}
</script>
<style lang="scss">
.about {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .content {

  }
}
</style>
